<template>
	<view class="pt20 plr15 blue" :class="{ light: theme == 'light' }">
		<view class="currency  flex">
			<text :class="changeRechargeIndex==0?'currency-active':'bgPart'" @tap="changeRecharge(0)" >{{$t('zdy.qbdz')}}</text>
			<text :class="changeRechargeIndex==1?'currency-active':'bgPart'" @tap="changeRecharge(1)">{{$t('store.bank')}}</text>
		</view>
		<view class="bgPart flex alcenter between plr15 ptb15 radius4">
			<text>{{ $t('assets.cur_coin') }}</text>
			<text>{{ currencyName || '--' }}</text>
		</view>
		<view class="currency  flex" v-if="currency==3 && changeRechargeIndex==0">
			<text :class="changeIndex==0?'currency-active':'bgPart'" @tap="changeAddress(0)" >ERC20</text>
			<text :class="changeIndex==1?'currency-active':'bgPart'" @tap="changeAddress(1)">OMNI</text>
		</view>
		<view class="mt10" v-if="chargeType.length > 0">
			<view class="">{{$t('bind.liantype')}}</view>
			<view class="flex mt10">
				<view
					v-for="(item, index) in chargeType"
					:key="index"
					class="mr10 ptb5 plr10 bd_input radius4"
					:class="name == item.type ? 'active' : ''"
					@tap="selectCharge(item)"
				>
					{{ item.type }}
				</view>
			</view>
		</view>
		<view class="flex between mt10 alcenter" v-if="labelText">
			<view class="">{{ labelText }}</view>
			<view class="wt80 h30 lh30 radius4 bgBlue white tc" @tap="copyLabel">复制标签</view>
		</view>
		<view class="mt10 bgPart radius4 ptb20 plr15 tc">
			<view v-if="changeRechargeIndex==0">
			<image :src="img" mode="widthFix" :style="{ width: size + 'px', height: size + 'px' }" class="mauto"></image>
			<view class="mt20 ft12 tc">{{ $t('assets.addr_charge') }}</view>
			<view class="tc ft12  mt5">{{ address }}</view>
			<view class="mt20 wt80 h30 lh30 radius4 mauto bgBlue white" @tap="fuzhi_invite">{{ $t('assets.coypaddr') }}</view>
			</view>
			<view v-if="changeRechargeIndex==1">
				<view class="mt20 tl">
					<text>{{$t('zdy.a34')}}</text>
					<input type="text" disabled class="mt10 blueinput" v-model="rechargeInfo.bank_name"/>
				</view>
				<view class="mt20 tl">
					<text>{{$t('zdy.a35')}}</text>
					<input type="text" disabled  class="mt10 blueinput" v-model="rechargeInfo.bank_account"/>
				</view>
				<view class="mt20 tl">
					<text>{{$t('zdy.a36')}}</text>
					<input type="text" disabled class="mt10 blueinput" v-model="rechargeInfo.open_bank"/>
				</view>
			</view>
			<view class="mt20 tl">
				<text>{{$t('zdy.czsl')}}</text>
				<input type="number"  v-model="amount" @input="inputAmount" class="mt10 blueinput"  :placeholder="$t('trade.p_num')"/>
			</view>
			<view class="mt20 tl" v-if="changeRechargeIndex==1">
				<text>{{$t('zdy.czje')}}￥</text>
				<input type="number"   v-model="amountRmb" disabled class="mt10 blueinput "  />
			</view>
			<view class="mt20 tl" v-if="changeRechargeIndex==0">
				<text>{{$t('zdy.qbdz')}}</text>
				<input type="text" v-model="useraccout" class="mt10 blueinput"  :placeholder="$t('zdy.enterqbdz')"/>
			</view>
			<view class="tl mt20 rechargeview" @tap="recharge">{{ $t('zdy.tjsh') }}</view>
		</view>
		
		<view class="mt20 ">
			<view class="mb5">
				<text class="ft12">{{ $t('assets.c_tip1') }}</text>
				<text class="ft12">{{ currencyName || '--' }}</text>
				<text class="ft12">{{ $t('assets.assets') }}，</text>
				<text class="ft12">{{ $t('assets.c_tip2') }}。</text>
			</view>
			<view class="mb5">
				<text class="ft12">{{ currencyName || '--' }}</text>
				<text class="ft12">{{ $t('assets.c_tip3') }}。</text>
			</view>
			<view class="ft12">{{ $t('assets.c_tip4') }}。</view>
			<view class="mb5">
				<text class="ft12">{{ $t('assets.c_tip5') }}：</text>
				<text class="mainnum ft12">{{ coinInfo.min_number || '--' }}</text>
				<text class="ft12">{{ currencyName || '--' }}</text>
				,
			</view>
			<view class="mb5 ft12">{{ $t('assets.c_tip6') }}。</view>
			<view class="mb5 ft12">{{ $t('assets.c_tip7') }}。</view>
			<view class="mb5 ft12">{{ $t('assets.c_tip8') }}。</view>
		</view>
	</view>
</template>

<script>
import QR from '@/common/qrcode.js';
 import h5Copy from '@/js_sdk/junyi-h5-copy/junyi-h5-copy.js'
import { mapState } from 'vuex';
export default {
	data() {
		return {
			amount:"",
			useraccout:"",
			changeIndex:0,
			address3:'',
			address2:'',
			title: '',
			currency: '',
			coinInfo: {},
			img: '',
			size: 160,
			address: '',
			name: '',
			chargeType: [],
			contractAddress: '',
			userId: '',
			currencyName: '',
			labelText: '',
			walletData: [],
			changeRechargeIndex:1,
			rechargeInfo:[],
			rmb:1,
			amountRmb:0.00,
			bank_account:"",
		};
	},
	onLoad(e) {
		this.currency = e.currency;
		this.name = e.name;
		uni.setNavigationBarTitle({
			title: this.$t('assets').charge
		});
		this.getCoinInfo();
		this.getBankCard();
		this.getRmbRate();
	},
	onPullDownRefresh() {
		this.getCoinInfo();
	},
	computed: {
		...mapState(['theme'])
	},
	onShow() {
		this.$utils.setThemeTop(this.theme);
	},
	methods: {
		inputAmount(){
			this.amountRmb=Number(this.amount*this.rmb).toFixed(2);
		},
		getRmbRate(){
			this.$utils.initDataToken({
				url:"wallet/getRateCurrency",
				data:{
					id:this.currency
				}
			},res=>{
				this.rmb=res.rmb;
			})
		},
		getBankCardUser(){
			this.$utils.initDataToken({
				url:"user/cash_info",
				type:"post",
			},res=>{
				if(!res.bank_account){
				  uni.navigateTo({
				  	url:'/pages/mine/collect_money'
				  })
				}else{
					this.bank_account=res.bank_account;
				}
			})
		},
		getBankCard(){
			this.$utils.initDataToken({
				url:"wallet/getRechargeSetting"				
			},res=>{
				this.rechargeInfo=res;
			})
		},			
		changeRecharge(i){
			if(i==1 &&this.bank_account==""){
				this.getBankCardUser();
			}
			this.amount="";
			this.changeRechargeIndex=i;
		},
		recharge(){
			let useraccout=this.useraccout;
			this.changeRechargeIndex==1?useraccout="银行卡通道":"";
			if(!useraccout){				
				this.$utils.showLayer(this.$t('zdy.enterqbdz'));
				return;
			}
			if(!this.amount){				
				this.$utils.showLayer(this.$t('trade.p_num'));
				return;
			}
			uni.showLoading();
			this.$utils.initDataToken({ url: 'wallet/charge_req',type:"post", data:{
				currency:this.currency,account:useraccout,amount:this.amount,
				type:this.changeRechargeIndex,
				}},res=>{
				this.$utils.showLayer(res);
				this.amountRmb="";
					this.amount='';	
					this.useraccout='';
			})
		},
		changeAddress(i){
			this.changeIndex=i;
			if(i==0){
				this.address = this.address2;
				this.creatQrcode();
			}else{
				this.address = this.address3;
				this.creatQrcode();
			}
		},
		getCoinInfo() {
			this.$utils.initDataToken({ url: 'wallet/get_info', type: 'POST', data: { currency: this.currency } }, res => {
				this.currencyName = res.name;
				this.walletData = res.wallet_data;
				if (res.multi_protocol == 1) {
					this.chargeType = res.type_data;
					this.contractAddress = res.type_data[0].contract_address;
					this.name = res.type_data[0].type;
					this.coinInfo = res.type_data[0];
					var ids = res.type_data[0].id;
					if (res.wallet_data && res.wallet_data.length > 0) {
						res.wallet_data.forEach(item => {
							if (ids == item.currency) {
								this.labelText = item.label;
							}
						});
					}
				} else {
					this.contractAddress = res.contract_address;
					this.name = res.type;
					this.coinInfo = res;
					if (res.wallet_data && res.wallet_data.length > 0) {
						this.labelText = res.wallet_data[0].label;
					}
				}
				this.getUserInfo();
			});
		},
		getUserInfo() {
			this.$utils.initDataToken({ url: 'user/info' }, res => {
				this.userId = res.id;
				this.getAddress(res.id);
			});
		},
		// 选择充币类型
		selectCharge(options) {
			var that = this;
			that.contractAddress = options.contract_address;
			that.name = options.type;
			that.coinInfo = options;
			var ids = options.id;
			if (that.walletData.length > 0) {
				that.walletData.forEach(item => {
					if (ids == item.currency) {
						that.labelText = item.label;
					}
				});
			}
			that.getAddress(that.userId);
		},
		getAddress(id) {
			this.$utils.initDataToken({type:"post", url: 'wallet/get_in_address', data: { user_id: id, currency:this.currency } }, res => {
				uni.stopPullDownRefresh();
					if(res.omni || res.erc20){
						this.address2=res.erc20;
						this.address3=res.omni;
						this.address = res.erc20;
						this.creatQrcode();
					}else if(res.erc20){
						this.address = res.erc20;
						this.creatQrcode();
					}else if(res.omni){
						this.address = res.omni;
						this.creatQrcode();
					}else{
						this.address = res;
						this.creatQrcode();
					}
			});
		},
		// 复制
		fuzhi_invite() {
			var that = this;
			// #ifdef APP-PLUS
			uni.setClipboardData({
				data: that.address,
				success: function() {
					that.$utils.showLayer(that.$t('assets.copy_success'));
				},
				fail: function() {
					that.$utils.showLayer(that.$t('assets.copy_err'));
				}
			});
			// #endif
			 const result = h5Copy(that.address)
			   if (result === false) {
				 uni.showToast({
				   title:'不支持',
				 })
			   } else {
				 uni.showToast({
				   title:'复制成功',
				   icon:'none'
				 })
			   }
		},
		copyLabel() {
			var that = this;
			// #ifdef APP-PLUS
			uni.setClipboardData({
				data: that.labelText,
				success: function() {
					that.$utils.showLayer(that.$t('assets.copy_success'));
				},
				fail: function() {
					that.$utils.showLayer(that.$t('assets.copy_err'));
				}
			});
			// #endif
		},
		creatQrcode() {
			if (this.address == '') {
				return false;
			}
			let img = QR.createQrCodeImg(this.address);
			this.img = img;
		}
	}
};
</script>

<style>
.rechargeview{
	color:#fff;
	border-radius: 5px;
	text-align: center;
	width: 150upx;
	height: 60upx;
	line-height: 60upx;
	background-color: #1881d2;
}
.blueinput{
	padding: 0 5%;
	height: 60upx;
	line-height: 60upx;
	border: 1px solid #007AFF;
}
.currency{
	margin:10px auto;
	
	justify-content: space-between;
}
.currency-active{
	color:#fff;
	background-color: #007aff;
}
.currency text{
	width: 48%;
	padding: 10px 0;
	text-align: center;
	display: inline-block;
}
.active {
	color: #007aff;
	border-color: #007aff;
}
</style>
